<!-- 左侧菜单 -- 郭萍 -- 2017年4月 -->
<template>
  <li @click.stop="gotoPath(model)">
    <div @click='toggle' :class="calClass">　　
      <i v-if='isFolder' :class="[open?'el-icon-arrow-up':'el-icon-arrow-down']" style="margin-top:18px;float:right;margin-right: 20px;"></i>
      <!--isFolder判断是否存在子级改变图标-->
      <!--<router-link :to="model.menuUrl" style="text-decoration: none;color:#48576A;width:100%;display:block" v-if="model.menuUrl!=='/'" :active1="vuexdata.url===model.menuUrl" @click="showActive"><span class="submenu1">{{model.menuName}}</span></router-link>-->
      <router-link :to="model.menuUrl!=='/'?model.menuUrl:''" style="text-decoration: none;width:100%;display:block" v-if="model.menuUrl!=='/'" @click.native='showActive' :class="{active1:model.menuUrl===vuexUrl}">
          <span class="submenu1">
            <template v-if="model.menuName === '全部订单' && allCount > 0">
              <i class="icon iconfont" v-html="model.icon" v-if="model.icon && model.icon !== ''" style="margin-right: 4px;font-size:15px;color:#48576a;"></i>
              <span style="color:#48576a;">{{model.menuName}}</span>
              <sup id="dots">{{allCount>99?99:allCount}}</sup>
            </template>
            <template v-else-if="model.menuName === '自提订单' && mdCount > 0">
              <i class="icon iconfont" v-html="model.icon" v-if="model.icon && model.icon !== ''" style="margin-right: 4px;font-size:15px;color:#48576a;"></i>
              <span style="color:#48576a;">{{model.menuName}}</span>
              <sup id="dots">{{mdCount>99?99:mdCount}}</sup>
            </template>
            <template v-else-if="model.menuName === '同城订单' && tcCount > 0">
              <i class="icon iconfont" v-html="model.icon" v-if="model.icon && model.icon !== ''" style="margin-right: 4px;font-size:15px;color:#48576a;"></i>
              <span style="color:#48576a;">{{model.menuName}}</span>
              <sup id="dots">{{tcCount>99?99:tcCount}}</sup>
            </template>
            <template v-else-if="model.menuName === '快递订单' && expressCount > 0">
              <i class="icon iconfont" v-html="model.icon" v-if="model.icon && model.icon !== ''" style="margin-right: 4px;font-size:15px;color:#48576a;"></i>
              <span style="color:#48576a;">{{model.menuName}}</span>
              <sup id="dots">{{expressCount>99?99:expressCount}}</sup>
            </template>
            <template v-else>
              <i class="icon iconfont" v-html="model.icon" v-if="model.icon && model.icon !== ''" style="margin-right: 4px;font-size:15px;color:#48576a;"></i>
              <span style="color:#48576a;">{{model.menuName}}</span>
            </template>
          </span>
      </router-link>
      <!--<a  style="text-decoration: none;" v-if="model.menuUrl!=='/'" :class="{active1:model.menuUrl===vuexUrl}">-->
        <!--<i :class="[iconFont, model.icon]" style="margin-right: 10px" v-if="model.icon && model.icon !== ''"></i>-->
        <!--{{model.menuName}}-->
      <!--</a>-->
      <span class="submenu1" v-if="model.menuUrl==='/'">
        <template v-if="model.menuName === '订单管理' && allCount > 0"><!-- 订单管理订单数显示 -->
          <i class="icon iconfont" v-html="model.icon" v-if="model.icon && model.icon !== ''" style="margin-right:4px;font-size:15px;"></i>
          <span>{{model.menuName}}</span>
          <sup id="dots">{{allCount>99?99:allCount}}</sup>
        </template>
        <template v-else>
          <i class="icon iconfont" v-html="model.icon" v-if="model.icon && model.icon !== ''" style="margin-right:4px;font-size:15px;"></i>
          <span>{{model.menuName}}</span>
        </template>
      </span>
    </div>
    <ul v-show="open" v-if='isFolder' class="menu2">
      <itemsld v-for='(cel, index) in model.childNode' :key="index" :model='cel' class="menu3" :menuIndex="menuIndex+1" url="baseAccount"
                :allCount="allCount" :mdCount="mdCount" :tcCount="tcCount" :expressCount="expressCount" ></itemsld>
    </ul>
  </li>
</template>

<script type="text/ecmascript-6">
  import {gotBreads} from '../../smartlight/common/js/util.js'
  export default {
    name: 'itemsld',
    props: {
      model: {
        type: Object
      },
      menuIndex: {
        type: Number,
        default: 0
      },
      url: {
        type: String
      },
      allCount: { // 全部订单数
        type: Number,
        default: 0
      },
      mdCount: { // 门店自提订单数
        type: Number,
        default: 0
      },
      tcCount: { // 同城配送订单数
        type: Number,
        default: 0
      },
      expressCount: { // 快递订单数
        type: Number,
        default: 0
      }
    },
    data () {
      return {
        open: false,
        iconFont: 'iconfont',
        iconCode: '',
        allMenuList: [] // 菜单集合
      }
    },
    computed: {
      isFolder () {
        return this.model.childNode && this.model.childNode.length
      },
      calClass () {
        return 'menu' + this.menuIndex
      },
      vuexUrl () {
        return this.$store.state.vuexdata.url
      }
    },
    methods: {
      toggle: function () {
        if (this.isFolder) {
          this.open = !this.open
        }
      },
      showActive: function () {
        this.$store.dispatch('showActive', {url: this.model.menuUrl})
      },
      gotoPath (model) {
        if (model.menuUrl !== '/' && model.menuUrl !== '') {
          var allMenus = sessionStorage.getItem('allMenus')
          this.allMenuList = JSON.parse(allMenus)
          var breadArr = gotBreads(model, this.allMenuList) // 面包屑数据
          this.$store.dispatch('updateBreads', breadArr)
          this.$store.dispatch('updatelocationpath', model.menuUrl)
          this.$store.dispatch('showActive', {url: model.menuUrl})
          // 将面包屑和url保存至sessionStorage
          sessionStorage.setItem('breads', breadArr)
          sessionStorage.setItem('menuUrl', model.menuUrl)
        }
      }
    },
    created () {
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

  .menu1
    line-height:50px;cursor:pointer;
    color:#48576A;
    .submenu1
      margin-left:20px;

  .menu1:hover
    background-color:#EFF9FF;
    transition: background-color 0.2s ease-in;
  .menu2
    background-color:#fff;
    cursor:pointer;
    line-height:40px;
    padding-left:0px;
    .submenu1
      margin-left:50px;
    a
      color:#48576a;
      display:inline-block;
    .active1
      background: #EFF9FF;
      border-right:2px solid #38ADFF
      color:#38ADFF
  .menu2:hover
    background-color:#EFF9FF;
    transition: background-color 0.2s ease-in;
  .menu3
    color:#48576A;
    cursor:pointer;
    padding-left:0px;
    .menu3
      margin-left:10px;
    .submenu1
      margin-left:44px;
  .menu3:hover
    background-color:#e1ebf5;
    transition: background-color 0.2s ease-in;
  .submenu1>i.icon
    vertical-align: top;
#dots
  width:16px;height:16px;background-color:red;color:#fff;line-height:16px;border-radius:10px;text-align:center;display :inline-block
</style>

